<template>
  <div class="userGander">
    <van-picker
      show-toolbar
      title="性别"
      :columns="columns"
      :default-index="defaultVal"
      @confirm="onConfirm"
      @cancel="$emit('onCloseGender')"
      @change="onChange"
    />
  </div>
</template>

<script>
// 进入 面板 面板 选项 应该选择 与 服务端应该显示同一个数据
// 传输 数据 到视图面板
// 导入 修改昵称接口
import { editUserProfile } from '@/api/user.js'
export default {
  name: 'userGander',
  components: {},
  props: {
    // 接收传输 过来的 视图 以及 服务端此时的数据
    gender: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      // 控制选项 数据显示
      columns: ['男', '女'],
      // 设置 默认值，也就是与视图选择同步
      defaultVal: this.gender
    }
  },
  created() {},
  methods: {
    // 点击 面板取消 按键
    // onCancel() {
    //   this.$emit('onCloseGender')
    // }
    // 点击 面板确认按键
    async onConfirm(val, index) {
      try {
        // 如果 此次数据 与 上次的数据 是一样的 那么就不发送这次请求
        if (this.gender !== index) {
          // 默认 会接收 两个 参数 一个是 当前选项中的 元素本身，一个 是当前元素的索引值
          console.log(val, index)
          const { data } = await editUserProfile({ gender: index })
          console.log(data)
          // 数据修改成功 更新到视图上
          this.$emit('changeView', index)
          // 提示数据 修改成功
        }
        this.$toast.success('修改数据成功')
      } catch (error) {
        this.$toast.fail('数据修改失败，亲稍后')
      }
    },
    // 当视图 发生 改变的时候
    onChange() {}
  },
  computed: {},
  watch: {}
}
</script>

<style lang="less" scoped>
</style>
